<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />

  <script src="./js/easeljs.js"></script>
  <script src="./js/eventemitter2.min.js"></script>
  <script src="./js/roslib.js"></script>
  <script src="./js/ros2d.js"></script>

  <script>
    /**
     * Setup all visualization elements when the page is loaded. 
     */
    function init() {
      // Connect to ROS.
      var ros = new ROSLIB.Ros({
        url: 'ws://192.168.2.91:9090'
      });

      // Create the main viewer.
      var viewer = new ROS2D.Viewer({
        divID: 'map',
        width: window.innerWidth,
        height: window.innerHeight,
        antialias: true
      });

      // Setup the map client.
      var gridClient = new ROS2D.OccupancyGridClient({
        ros: ros,
        rootObject: viewer.scene,
        // Use this property in case of continuous updates			
        continuous: true
      });

      // Scale the canvas to fit to the map
      gridClient.on('change', function () {
        viewer.scaleToDimensions(gridClient.currentGrid.width, gridClient.currentGrid.height);
        viewer.shift(gridClient.currentGrid.pose.position.x, gridClient.currentGrid.pose.position.y);
      });
    }
  </script>
</head>

<body onload="init()" style="margin:0px;">
  <div id="map"></div>
</body>

</html>